import React, { Component } from 'react'

export class Input extends Component {
    state={
        value:"",//默认inputvalue值
        data:[]
    }
    //把input通过onchange受控
    inputOnchange(e){
        // console.log(e);
        this.setState({value:e.target.value})
    }
    //添加
    add(){
        // 1.先拷贝state下的数据
        // 2.做你要的操作
        // 3.通过this.setState()赋值
        let data = this.state.data
        data.push(this.state.value)
        this.setState({data:data})
    }   
    //删除
    del(index){
        let data = this.state.data
        data.splice(index,1)
        this.setState({data:data})
    }
    //修改
    edit(index){
        let data = this.state.data
        data[index]="xxxxxxxxxxxx"
        this.setState({data:data})
    }
    render() {
        let {value,data} = this.state
        return (
            <div>

                <input value={value} onChange={this.inputOnchange.bind(this)}/> 
                <button onClick ={this.add.bind(this)}>添加</button>
                {
                    data.map((item,index)=>{
                        return <p key={index}>
                            {item}
                            <button onClick={this.edit.bind(this,index)}>修改</button>
                            <button onClick={this.del.bind(this,index)}>删除</button>
                        </p> 
                    })
                }
            </div>
        )
    }
}

export default Input
